<template>
  <div class="home">
    <van-search @update:model-value="onSearch" v-model="value" placeholder="请输入搜索关键词" />
    <van-tabs sticky @click-tab="onClickTab" color="red" title-active-color="red" v-model:active="active">
      <van-tab title="中央要闻">
        <skeletonCom v-if="showSkeleton" type="news"></skeletonCom>
        <news-content v-else @load="loadData" :loading="loading" :finished="finished" :src="djywIconObj" :data="newsData"
                      :imageData="newsImage"></news-content>
      </van-tab>
      <van-tab title="江苏新闻">
        <skeletonCom v-if="showSkeleton" type="news"></skeletonCom>
        <news-content v-else @load="loadData" :loading="loading" :finished="finished" :src="djywIconObj" :data="newsData"
                      :imageData="newsImage"></news-content>
      </van-tab>
      <van-tab title="苏州新闻">
        <skeletonCom v-if="showSkeleton" type="news"></skeletonCom>
        <news-content v-else @load="loadData" :loading="loading" :finished="finished" :src="djywIconObj" :data="newsData"
                      :imageData="newsImage"></news-content>
      </van-tab>
      <!-- <van-tab title="主题教育">
        <news-content @load="loadData" :loading="loading" :finished="finished" :src="djywIconObj" :data="newsData"
                      :imageData="newsImage"></news-content>
      </van-tab> -->
    </van-tabs>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { getNewsBigImage, getNewsList } from '@/api/importantNews'
import newsContent from "@/components/newsContent/newsContent.vue";
import djywIcon from '@/assets/img/more.png';
import { INewsResquestParam, INewsRes, INewsCommonRes } from "./type";
import useGetPaginationData from "./useGetData";
import { debounce } from "@/util";
import skeletonCom from "@/components/skeletonCom/skeletonCom.vue";
const djywIconObj = djywIcon
const params: INewsResquestParam = {
  token: '',
  page: 1,
  pageSize: 10,
  type: 'zyyw',
  title: ''
}
let imgBigType = 'xwdt'
const newsImage = ref<Array<INewsRes & {
  newsImg: string
}>>([])
const { newsData, getData, loading, finished, showSkeleton } = useGetPaginationData<INewsResquestParam, INewsCommonRes<INewsRes[]>, INewsRes>(getNewsList);
const value = ref("");
const active = ref("1");
function getBigImage() {
  getNewsBigImage({
    ...params,
    pageSize: 5,
    type: imgBigType
  }).then(res => {
    if (res.code == 200) {
      newsImage.value = res.data
    }

  })
}
const onSearch = debounce((value: string) => {
  params.page = 1
  params.title = value
  getData(params);
}, 800)
onMounted(() => {
  getData(params);
  getBigImage();
});
function loadData() {
  params.page++
  getData(params)
}
async function onClickTab(value: any) {
  showSkeleton.value = true
  switch (value.name) {
    case 0:
      params.type = 'zyyw'
      imgBigType = 'xwdt'
      break;
    case 1:
      params.type = 'jsyw'
      imgBigType = 'jsyw_big'

      break;
    case 2:
      params.type = 'szyw'
      imgBigType = 'szyw_big'

      break;
    case 3:
      params.type = 'ztjy'
      imgBigType = 'ztjy_big'
      break;
  }
  params.page = 1
  newsData.value = [];
  newsImage.value = []
  finished.value = false
  getData(params)
  getBigImage()
}


</script>
<style lang="less" scoped>
.home {
  font-size: 24px;
}
</style>
